<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script> -->
  <!-- <script src="./vtable.min.es5.js"></script> -->
  <script src="./vtable.min.js"></script>
  <!-- <script src="./vtable.js"></script> -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <!-- https://codesandbox.io/s/vtable-summary-row-mh3fjg?file=/src/index.ts:9-18 -->
  <!-- <div id="tableContainer" style="width: 100%;height:500px;"></div> -->
  <!-- <div id="tableContainer" style="width: 1200px;height:500px;"></div> -->
  <div style="width: 100%;height:400px;">
    <div id="tableContainer" style="width: 100%;height:100%"></div>
  </div>
  <script>
    function generateRandomHobbies() {
      const hobbies = [
        "Reading books",
        "Playing video games",
        "Watching movies",
        "Cooking",
        "Hiking",
        "Traveling",
        "Photography",
        "Playing musical instruments",
        "Gardening",
        "Painting",
        "Writing",
        "Swimming",
      ];

      const numHobbies = Math.floor(Math.random() * 3) + 1; // 生成 1-3 之间的随机整数
      const selectedHobbies = [];

      for (let i = 0; i < numHobbies; i++) {
        const randomIndex = Math.floor(Math.random() * hobbies.length);
        const hobby = hobbies[randomIndex];
        selectedHobbies.push(hobby);
        hobbies.splice(randomIndex, 1);
      }

      return selectedHobbies.join(", ");
    }

    function generateRecords(count) {
      return Array.from(new Array(count)).map((_, i) => {
        return {
          id: i + 1,
          hobbies: generateRandomHobbies(),
        };
      });
    }

    const records = generateRecords(30);

    const columns = [
      {
        field: "id",
        title: "ID",
        width: 80,
      },
      {
        field: "hobbies",
        title: "hobbies",
        width: 200,
      },
      {
        field: "hobbies",
        title: "hobbies",
        width: 200,
      },
      {
        field: "hobbies",
        title: "hobbies",
        width: 200,
      },
    ];
    const option = {
      records,
      columns,
      widthMode: 'autoWidth',
      frozenColCount: 1,
      rightFrozenColCount: 1,
      // autoFillWidth: true,
    };

    const tableInstance = new VTable.ListTable(document.getElementById("tableContainer"), option);

  </script>
</body>

</html>